<template>
  <el-group-title class="d_jump" title="基本信息">
    <template slot="groupTitle">
      <el-form :model="form" ref="form" label-width="160px" class="ccui-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="代付单编号：">
              <div v-text="form.replacePayCode"></div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="代付单名称：" :title="form.replacePayName">
              <div v-text="form.replacePayName"  class="hide"></div>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号：">
              <div v-text="form.contractCode"></div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="供方名称：" :title="form.supplierName">
              <div v-text="form.supplierName"  class="hide"></div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="合同名称：" :title="form.contractName">
              <div v-text="form.contractName" class="hide"></div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="需方名称：" :title="form.needName">
              <div v-text="form.needName" class="hide"></div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款金额(元)：">
              <div v-text="form.paymentMoney"></div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系人：">
              <div v-text="form.contacts"></div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人手机号：">
              <div v-text="form.contactsPhone"></div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编制日期：">
              <div v-text="form.reportTime"></div>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="18">
            <el-form-item label="付款理由：" :title="form.paymentThing">
              <div v-text="form.paymentThing" class="remarkClass" ></div>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="18">
            <el-form-item label="备注：" :title="form.remarks">
              <div 
                v-text="form.remarks" 
                class="remarkClass" 
                
              ></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </el-group-title>
</template>

<script>
export default {
  props: {
    basicInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      form: {}
    };
  },
  watch: {
    basicInfo() {
      this.form = this.basicInfo;
      this.form.paymentMoney = this.form.paymentMoney.toFixed(2)
    },
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
/deep/ .el-button--single-number {
  width: 46px;
  margin-left: 10px;
  padding: 0 9px;
}
/deep/.ccui-pre-form-item {
  .el-form-item__label {
    line-height: 16px;
  }
}
.remarkClass {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
}
.hide{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
